Ask AI
Skip to main content

Template placeholder

Values that are passed to a template by using Arguments/Parameters can be used to replace “Placeholders” used within any type of element. For example a Text element can contain a placeholder in the form of “{{ TEST_VALUE }}”. This will result in the placeholder to be replaced by whatever value the “TEST_VALUE” parameter has.

Date Format​

If you want to format a parameter of type DATE to a readable date on a page. You can use the “dateformat” function that will result in a date formatted like this: dd/MM/yyyy

Example: {{ MY_DATE | dateformat }} results in 26/03/1986

Datetime Format​

If you want to format a parameter of type DATE to a readable datetime on a page. You can use the “datetimeformat” function that will result in a date formatted like this: dd/MM/yyyy HH:mm:ss

Example: {{ MY_DATE | datetimeformat }} results in 26/03/1986 12:51:24

JSON​

If you want to format a parameter of type OBJECT to a readable json on a page. You can use the “json” function that will result in a formatted json string.

Example: {{ MY_OBJECT | json }} results in

{
  "name": "Tristan",
  "birthDate": "26/03/1986"
}

Default Value​

If you want to ensure that a placeholder displays a fallback value when the actual data is missing, empty, or undefined, you can use the default function. This is useful for keeping your templates clean and user-friendly, avoiding blank spaces or error messages when data is not available.

Usage:

{{ PLACEHOLDER | default: 'FALLBACK_VALUE' }}

When PLACEHOLDER has no value, the FALLBACK_VALUE will be used instead.

Examples:​

{{ DATA.body.number | default: '0' }}

Result: If DATA.body.number is missing or empty, the output will be 0.

{{ DATA.body.string | default: ' ' }}

Result: If DATA.body.string is empty, a single space character will be displayed instead.

You can combine default with other formatting functions for better control over display values.

{{ DATA.body.date | dateformat }}

Formats a date into dd/MM/yyyy format.

{{ DATA.body.datetime | datetimeformat }}

Formats a datetime into dd/MM/yyyy HH:mm:ss format.

{{ DATA.body.number | numberformat }}

Formats a number according to locale rules.

{{ DATA.body.currency | currency }}

Formats a currency value using the system's default currency.

{{ DATA.body.currency | currency: {currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 4} }}

Formats a currency value explicitly in EUR with precision between 2 and 4 decimal places.

Using LiquidJS in Templates​

This templating system supports Liquid syntax for placeholders, filters, and tags. NoCode-X lets you transform values (with filters) and control what gets shown (with tags), without writing code.

Note:

  • You can chain filters using the pipe character |.
  • This guide highlights the most commonly used filters and tags for citizen developers. For edge cases, consult the official references above.
  • For dates and datetimes, prefer the platform-provided dateformat and datetimeformat shown earlier.

Filters Overview​

Filters transform a value and are used inside output statements: {{ value | filter: param }}. You can chain multiple filters.

Common string filters​

  • Change case:
    • {{ name | upcase }} → "TRISTAN"
    • {{ name | downcase }} → "tristan"
    • {{ name | capitalize }} → "Tristan"
  • Replace/remove:
    • {{ text | replace: 'cat', 'dog' }}
    • {{ text | replace_first: 'cat', 'dog' }}
    • {{ text | remove: '-' }} removes all occurrences
    • {{ text | remove_first: '-' }} removes first occurrence
  • Trim/whitespace:
    • {{ text | strip }} trims both ends
    • {{ text | lstrip }} / {{ text | rstrip }}
    • {{ text | strip_newlines }}
  • Shorten:
    • {{ text | truncate: 20, '…' }}
    • {{ text | truncatewords: 10, '…' }}
  • Escaping:
    • {{ html | escape }} converts < to &lt;
    • {{ html | escape_once }} avoids double-escaping

Examples:

{{ user.first_name | default: 'there' | capitalize }}
Hello, {{ user.first_name | default: 'there' | capitalize }}!

Common number filters​

  • Math operations:
    • {{ price | plus: 5 }}
    • {{ qty | minus: 1 }}
    • {{ total | times: 1.21 }} add VAT
    • {{ total | divided_by: 3 }}
    • {{ n | modulo: 2 }} → remainder
  • Rounding:
    • {{ score | round: 2 }} → 2 decimals
    • {{ score | ceil }} / {{ score | floor }}
    • {{ value | abs }} → absolute value

Combine with formatting:

{{ (amount | times: 1.21) | numberformat }}

Arrays and collection filters​

  • Size and items:
    • {{ items | size }} → number of items
    • {{ items | first }} / {{ items | last }}
  • Transformations:
    • {{ items | sort }}
    • {{ items | reverse }}
    • {{ items | uniq }} remove duplicates
    • {{ items | compact }} remove nil/empty
  • Mapping and filtering:
    • {{ people | map: 'name' | join: ', ' }}
    • {{ products | where: 'active', true }}
  • Join/split:
    • {{ tags | join: ', ' }}
    • {{ csv | split: ',' }}

Example:

{{ people | where: 'active', true | map: 'name' | join: ' · ' | default: 'No active people' }}

Date and time​

  • Prefer platform helpers:
    • {{ myDate | dateformat }} → dd/MM/yyyy
    • {{ myDate | datetimeformat }} → dd/MM/yyyy HH:mm:ss
  • Tip: You can combine with default to guard against missing values:
{{ myDate | default: '' | datetimeformat }}

Display and safety helpers​

  • HTML:
    • {{ html | strip_html }} remove tags
    • {{ text | newline_to_br }} convert newlines to <br>
  • URLs:
    • {{ text | url_encode }}
  • Diagnostics:
    • {{ data | json }} dump an object for debugging (as documented above)

Chaining example:

{{ user.bio | default: '' | strip_html | truncatewords: 25, '…' }}

Tags Overview​

Tags control logic, flow, and variable assignment. They use {% %} syntax and don’t directly output content.

Control flow​

  • If/Else:
{% if user.active %}
  Active
{% elsif user.pending %}
  Pending
{% else %}
  Inactive
{% endif %}
  • Unless (the inverse of if):
{% unless cart.empty %}
  You have items in your cart.
{% endunless %}
  • Case/When:
{% case status %}
  {% when 'open' %}Open
  {% when 'closed' %}Closed
  {% else %}Unknown
{% endcase %}

Loops and iteration​

  • For loops:
{% for item in items %}
  - {{ forloop.index }}: {{ item.name }}
{% endfor %}
  • For options:
    • limit:n, offset:n, reversed
    • break and continue inside loops
{% for p in products limit:5 %}
  {{ p.title }}
  {% if p.out_of_stock %}{% continue %}{% endif %}
{% endfor %}
  • Cycle (useful for alternating classes or separators):
{% cycle 'odd', 'even' %}

Variables and capture​

  • Assign a variable:
{% assign full_name = user.first | append: ' ' | append: user.last %}
{{ full_name | strip }}
  • Capture multi-line content:
{% capture greeting %}
Hello {{ user.first_name | default: 'there' }}!
{% endcapture %}

{{ greeting }}
  • Increment/Decrement (auto-incrementing counters):
{% increment counter %}
{% decrement counter %}

Note: increment outputs 0, then 1, then 2… each time it is called; decrement outputs -1, -2, -3…

Whitespace control​

  • Add - to trim surrounding whitespace:
{{- name -}}
{%- if cond -%}
  ...
{%- endif -%}

Comments and raw blocks​

  • Comment (ignored by the renderer):
{% comment %}
This content will not appear in the output.
{% endcomment %}
  • Raw (treat content literally; useful when showing syntax in examples):
{% raw %}
This shows {{ literally }} without interpreting it.
{% endraw %}

Includes and partials​

Depending on your environment configuration, supports including other templates. Availability may vary:

  • {% render 'snippet' %} or {% include 'snippet' %}

If your platform doesn’t provide a template loader, these may be disabled. Check your project’s capabilities before using.

Practical Recipes​

1) Safe person name with fallback and capitalization​

{{ person.first_name | default: '' | capitalize }} {{ person.last_name | default: '' | upcase }}

2) Show a human date or “N/A”​

{{ record.created_at | default: '' | dateformat | default: 'N/A' }}

3) Build a comma-separated list from objects​

{{ items | where: 'visible', true | map: 'label' | compact | join: ', ' | default: 'No items' }}

4) Conditional badge​

{% if score >= 90 %}
  {{ 'Gold' }}
{% elsif score >= 75 %}
  {{ 'Silver' }}
{% else %}
  {{ 'Bronze' }}
{% endif %}

5) Alternate row backgrounds​

{% for row in rows %}
  <div class="{% cycle 'bg-white', 'bg-gray-50' %}">{{ row.title }}</div>
{% endfor %}

6) Currency with math and formatting​

{{ (line.unit_price | times: line.quantity) | currency: {currency: 'EUR', minimumFractionDigits: 2} }}

7) Debug an object​

<pre>{{ payload | json }}</pre>

Best Practices and Tips​

  • Always guard optional values:
    • Use default early in a chain to prevent errors or empty output.
  • Keep output tidy:
    • Use whitespace control ({{- and -}}, {%- and -%}) around blocks that can add unwanted spaces/newlines.
  • Sanitize when needed:
    • Use escape or strip_html if rendering user-generated content.
  • Prefer platform date helpers:
    • Use dateformat and datetimeformat for consistent locale-friendly display.
  • Work with arrays safely:
    • Use compact to remove empty items before join.
  • Start simple, then chain:
    • Build transformations step by step: default → clean/transform → format.
  • Refer to the official references for anything advanced: